import React from 'react';
import {withRouter} from 'react-router-dom';
import {Form, Input, Button,} from 'antd';

import {hasErrors, validatorPassword} from '@/common/Validator';
import {formItemLayout} from '@/common/FormLayout';

const FormItem = Form.Item;

@withRouter class ResetPassword extends React.Component {
  state = {
    buttonLoading: false, // 按钮加载中
  };
  timerID = null;
  componentDidMount () {
    this.props.form.validateFields ();
  }
  handleSubmit = e => {
    e.preventDefault ();
    const self = this;
    const {buttonLoading} = this.state;
    const {history, location} = this.props;
    this.props.form.validateFields ((err, values) => {
      if (!err) {
        console.log ('Received values of form: ', values);
        
        if (buttonLoading) {
          return;
        }
        self.setState ({
          buttonLoading: true,
        });
        setTimeout (() => {
          // self.props.nextClick(1);
          this.setState ({
            buttonLoading: false,
          });
          history.replace (`${location.pathname}?step=2`);
        }, 1000);
        // registerApi (values)
        //   .then (result => {
        //     console.log ('result', result);
        //   })
        //   .catch (() => {
        //     self.isRegisterIng = false;
        //     message.error ('系统繁忙，请稍后重试！');
        //   });
      }
    });
  };
  compareToFirstPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('两次输入的密码不相同哦~');
    } else {
      callback();
    }
  }
  render () {
    const {
      buttonLoading,
    } = this.state;
    const {
      getFieldDecorator,
      isFieldTouched,
      getFieldError,
      getFieldsError,
    } = this.props.form;

    const passwordError = isFieldTouched ('password') && getFieldError ('password');
    const passwordAgainError = isFieldTouched ('passwordAgain') && getFieldError ('passwordAgain');

    return (
      <Form onSubmit={this.handleSubmit}>
        <FormItem
          {...formItemLayout}
          label="密码"
          validateStatus={passwordError ? 'error' : ''}
          help={passwordError || ''}
        >
          {getFieldDecorator ('password', {
            rules: [
              {
                required: true,
                message: '请输入密码!',
              },
              {
                validator: validatorPassword,
              },
            ],
          }) (
            <Input autoComplete="password" type="password" placeholder="请输入密码" />
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="确认密码"
          validateStatus={passwordAgainError ? 'error' : ''}
          help={passwordAgainError || ''}
        >
          {getFieldDecorator ('passwordAgain', {
            rules: [
              {
                required: true,
                message: '请输入密码!',
              },
              {
                validator: this.compareToFirstPassword
              }
            ],
          }) (
            <Input autoComplete="password" type="password" placeholder="请输入密码" />
          )}
        </FormItem>
        <FormItem className="form-center-button">
          <Button
            type="primary"
            disabled={hasErrors (getFieldsError ())}
            htmlType="submit"
            loading={buttonLoading}
          >
            确定
          </Button>
        </FormItem>
      </Form>
    );
  }
}

export default Form.create () (ResetPassword);
